<template>
  <div v-if="">
      <div class="canvas" ref="canvas">
          <img src="" class="aimg">
          <img :src="data.avatar" class="dimg">
          <span class="name" >{{data.nickname}}</span>
          <a href="https://mp.weixin.qq.com/s/kXfGEdd69cpKtB9_hCraDg" class="btn"></a>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
import html2canvas from 'html2canvas';
export default {
    data(){
      return {
        isData:false,
        isLoad:false,
        data:{},
        token:this.GLOBAL.serverSrc
      }
    },
    components:{
      html2canvas
    },
    created(){
      // document.title = '收藏了,附近让你走后门的100家吃喝玩乐门店!';
      this.getData();
    },
    mounted() {
      let dimg = document.querySelector(".dimg");
      dimg.onload = () => {
        console.log('onload');
        if(this.isLoad === false){
          this.isLoad = true;
          this.savecanvas();
        }
      }
    },
    methods:{
      getData(){
        var url=this.token+'/h5/auth/user';
        var obj={}
        this.$axios.post(url,obj).then(response=>{
            this.data=response.data.data
            if(response.data.code==400){
               window.location.href =this.token+'/h5/auth/wx';
            }else{
              this.isData = true;
              let aimg = document.querySelector(".aimg");
              aimg.src = require('./img/e.png');
            }
        })
        .catch(function(error) {
            console.log(error);
        });
      },
      savecanvas(){
        let canvas = document.querySelector(".canvas");
        let that = this;
        html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
          //scale   清晰度      logging  日志    useCORS跨域
          let type = 'png';
          let imgData = canvas.toDataURL(type); // 照片格式处理
          let img = document.querySelector('.aimg');
          img.src = imgData;
          //移除图片和名字
          let dimg = document.querySelector('.dimg');
          dimg.remove();
          let dname = document.querySelector('.name');
          dname.remove();
        });
      }
  }
}
</script>
<style lang="scss" scoped>
.canvas{
  width:100%;
  height:100%;
  position:fixed;
  // overflow-x: hidden;
  // overflow-y: scroll;
}
.aimg{
  width:100%;
  height:100vh;
}
.dimg{
  width:0.67rem;
  height:0.67rem;
  position:absolute;
  top:4%;
  left:0.3rem;
}
.name{
  font-size:0.13rem;
  position: absolute;
  top:0.5rem;
  left:1.02rem;
}
.btn{
  display: inline-block;
  width:1.07rem;
  height:0.35rem;
  position: fixed;
  bottom:0.1rem;
  left:1.4rem;
}
</style>
